<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-tabs v-model="tabStatus" type="card">
        <el-tab-pane :label="item.name" :name="item.id.toString()" v-for="item in statusLineTab"
                     :key="item.id"></el-tab-pane>
      </el-tabs>
      <!--      1我的2园长3会议-->
      <el-tabs v-model="searchData.style" type="card">
        <el-tab-pane :label="item.name" :name="item.id.toString()" v-for="item in statusLine"
                     :key="item.id"></el-tab-pane>
      </el-tabs>
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-select v-model="searchData.department_id" placeholder="选择部门" size="small"
                     class="w-140 mr-10">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in departmentList"
                       :key="index"></el-option>
          </el-select>
          <el-date-picker
              v-model="addtime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              class="mr-10">
          </el-date-picker>
          <el-button type="primary" size="small" @click="searchFn(1)"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="searchFn(2)"><i class="el-icon-refresh"></i>重置</el-button>
          <el-button @click.native="addVisible=true" size="small" type="primary" plain>
            新增{{Number(tabStatus)==1?'业务':(Number(tabStatus)==2?'公示':'文宣')}}请批单
          </el-button>
        </div>
        <p class="numberline toplineBox-right">总{{ page.total }}条</p>
      </div>
      <!--本体列表，数据 -->
      <tableIndex_yewu v-if="Number(tabStatus)==1" @examinBtn="examinBtn" :arryList="arryList" @godeDetail="godeDetail"></tableIndex_yewu>
      <tableIndex_gongshi v-if="tabStatus==2" @examinBtn="examinBtn" :arryList="arryList" @godeDetail="godeDetail"></tableIndex_gongshi>
      <tableIndex_wenxuan v-if="tabStatus==3" @examinBtn="examinBtn" :arryList="arryList" @godeDetail="godeDetail"></tableIndex_wenxuan>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <add_detail :visible.sync="addVisible" @InitFn="InitFn" :meetType="tabStatus"></add_detail>
    <detail_data :visible.sync="detailVisible" :applyDetailId="applyDetailId"
                 :styleType="searchData.style" :meetType="tabStatus" @InitFn="InitFn"></detail_data>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import {approveIndex, approveIndex_advert, approveIndex_public, approveDelete, approveDelete_public, approveDelete_advert} from '@/api/admin/approveApply'
import add_detail from "./add_detail";
import detail_data from "./detail_data";
import {departmentIndex} from '@/api/admin/system'
import {mapGetters} from "vuex";
import tableIndex_yewu from './yewu/tableIndex'
import tableIndex_gongshi from './gongshi/tableIndex'
import tableIndex_wenxuan from './wenxuan/tableIndex'

export default {
  components: {
    add_detail,
    detail_data,
    tableIndex_yewu,
    tableIndex_gongshi,
    tableIndex_wenxuan
  },
  data() {
    return {
      applyDetailId: false,
      addVisible: false,
      handleSelection: [],
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      iframeSrc: '',
      previewVisible: '',
      number: null,
      searchData: {
        p: 1,
        style: '1', // 1 我的 2 园长 3 会议
        department_id: '',
        start_time: '',
        end_time: '',
      },
      // <!--        0 待审核 1 会议通过 2 会议驳回 3 园长通过 4 园长驳回-->
      value: '1',
      addtime: '',
      tabType: '0',
      detailVisible: null,
      detailId: 0,
      flowName: '',
      flowList: [],
      statusLine: [
        {
          id: 1,
          name: '我的请批申请'
        },
        {
          id: 3,
          name: '我的集体决策'
        }
      ],
      signState: {
        0: '待确认',
        1: '已通过',
        2: '已驳回',
      },
      examingUser: {
        0: '待审核',
        1: '会议通过',
        2: '会议驳回',
        3: '园长通过',
        4: '园长驳回'
      },
      tabStatus:'1',
      departmentList: [],
      statusLineTab: [
        {
          id: 1,
          name: '业务请批'
        },
        {
          id: 2,
          name: '公示请批'
        },
        {
          id: 3,
          name: '文宣请批'
        }
      ],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    'searchData.style'() {
      this.searchFn(2)
    },
    tabStatus(){
      this.InitFn()
    }
  },
  created() {
    this.InitFn()
    this.getDepart()
  },
  methods: {
    getDepart() {
      departmentIndex({p: 0}).then(res => {
        this.departmentList = res.list
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(option) {
      if (Number(option.name) !== Number(this.searchData.type)) {
        this.searchData.type = option.name
        this.InitFn()
      }
    },
    searchFn(option) {
      this.page.pageindex = 1
      if (option === 1) {
        if (this.addtime) {
          this.searchData.start_time = this.addtime[0];
          this.searchData.end_time = this.addtime[1];
        } else {
          this.searchData.start_time = '';
          this.searchData.end_time = '';
        }
      } else {
        this.addtime = []
        this.searchData.department_id = '';
        this.searchData.start_time = '';
        this.searchData.end_time = '';
      }
      this.InitFn()
    },
    // 初始化
    InitFn() {
      this.searchData.p = this.page.pageindex
      if(Number(this.tabStatus)===1){
        approveIndex(this.searchData).then(res => {
          for (let item of res.list.data) {
            item.create_time = item.create_time.split(' ')[0]
            if (Number(this.searchData.style) === 3) {
              for (let children of item.sign) {
                if (children.user_id === this.userInfo.id) {
                  item.sign_state = children.status
                }
              }
            }
          }
          this.arryList = res.list.data
          this.page.total = res.list.total
        })
      }else if(Number(this.tabStatus)===2){
        approveIndex_public(this.searchData).then(res => {
          for (let item of res.list.data) {
            item.create_time = item.create_time.split(' ')[0]
            if (Number(this.searchData.style) === 3) {
              for (let children of item.sign) {
                if (children.user_id === this.userInfo.id) {
                  item.sign_state = children.status
                }
              }
            }
          }
          this.arryList = res.list.data
          this.page.total = res.list.total
        })
      }else if(Number(this.tabStatus)===3){
        approveIndex_advert(this.searchData).then(res => {
          for (let item of res.list.data) {
            item.create_time = item.create_time.split(' ')[0]
            if (Number(this.searchData.style) === 3) {
              for (let children of item.sign) {
                if (children.user_id === this.userInfo.id) {
                  item.sign_state = children.status
                }
              }
            }
          }
          this.arryList = res.list.data
          this.page.total = res.list.total
        })
      }

    },
    examinBtn(option) {
      let that = this;
      this.$confirm(`确认删除该【${option.user?option.user.realname:''}】请批，是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(Number(this.tabStatus)===1){
          approveDelete({id: option.id}).then(res => {
            console.log('res:', res)
            if (!res.code) {
              this.InitFn()
            }
          })
        }else if(Number(this.tabStatus)===2){
          approveDelete_public({id: option.id}).then(res => {
            console.log('res:', res)
            if (!res.code) {
              this.InitFn()
            }
          })
        }else if(Number(this.tabStatus)===3){
          approveDelete_advert({id: option.id}).then(res => {
            console.log('res:', res)
            if (!res.code) {
              this.InitFn()
            }
          })
        }
      }).catch(() => {

      });
    },
    changeFn() {
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    godeDetail(option) {
      this.applyDetailId = option.id;
      this.detailVisible = true;
    }
  },
  mounted() {
  },
  // 缓存机制 end
}
</script>


<style scoped>

.wx-user-box-line img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.wx-user-box-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-wx {
  cursor: pointer;
  padding: 5px;
}

.btn-wx:hover {
  color: #1b8de5;
  text-decoration: underline;
}

.delet-wx {
  color: red;
  cursor: pointer;
}

.delet-wx:hover {
  text-decoration: underline;
}

.tab-body {
  display: flex;
  align-items: center;
}

.tab-box {
  flex: 1;
}

.tab-box-list {
  display: flex;
  align-items: center;
}

.examinBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: red;
}

.examinBtn i {
  font-style: normal;
  color: #1b8de5;
  cursor: pointer;
  font-size: 12px;
}

.tableline .list {
  font-size: 12px;
}

.tableline .list i {
  font-style: normal;
}

.url-box-line {
  display: flex;
  align-items: center;
  color: #3e89ff;
}

.url-box-line:hover {
  text-decoration: underline;
}

.url-box-line .url-box-line-a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.examine-list {
  display: flex;
  padding: 10px 0;
}

.examine-list-title {
  width: 85px;
}

.examine-list-user {
  flex: 1;
}
</style>
